<template>
    <div class="goodsStock" style="margin-top: 10px;margin-left: 15px;margin-right: 15px">
      <div class="query">
        <el-form :inline="true" :model="stockQuery" class="demo-form-inline">
          <el-form-item label="商品名称">
            <el-input v-model="stockQuery.goodsName" placeholder="请输入商品名称"></el-input>
          </el-form-item>
          <el-form-item label="操作人">
            <el-input v-model="stockQuery.userName" placeholder="请输入操作人名称"></el-input>
          </el-form-item>

          <el-form-item label="商品类别">
            <el-select v-model="stockQuery.goodsAction" placeholder="请选择商品类别">
              <el-option key="入库" label="入库" value="入库"></el-option>
              <el-option key="进货" label="进货" value="进货"></el-option>
              <el-option key="领用" label="领用" value="领用"></el-option>
              <el-option key="报损" label="报损" value="报损"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="操作时间">
            <el-col :span="8">
              <el-date-picker type="date" value-format="yyyy-MM-dd" placeholder="选择开始日期" v-model="stockQuery.start_date" style="width: 100%;"></el-date-picker>
            </el-col>
            <el-col class="line" :span="2" style="text-align: center">-</el-col>
            <el-col :span="8">
              <el-date-picker type="date" value-format="yyyy-MM-dd" placeholder="选择结束日期" v-model="stockQuery.end_date" style="width: 100%;"></el-date-picker>
            </el-col>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="getStockList">查询</el-button>
          </el-form-item>
        </el-form>
      </div>

      <div class="table">
        <el-table
          :data="stockListData"
          style="width: 100%"
          border
          :header-cell-style="{'text-align':'center'}"
          :cell-style="{'text-align':'center'}"
          fit
          highlight-current-row
          v-loading="listLoading"
        >
          <el-table-column
            prop="id"
            label="序号"
          >
          </el-table-column>
          <el-table-column
            prop="user_info.nickname"
            label="操作人"
          >
          </el-table-column>

          <el-table-column
            prop="date"
            label="操作时间"
          >
          </el-table-column>

          <el-table-column
            prop="goods_info.name"
            label="操作商品"
          >
          </el-table-column>

          <el-table-column
            prop="goods_action"
            label="操作类型"
          >
          </el-table-column>

          <el-table-column
            prop="total_num"
            label="数量"
          >
          </el-table-column>

          <el-table-column
            prop="stock_total_num"
            label="累计库存总数"
          >
          </el-table-column>
          <el-table-column
            prop="stock_use_num"
            label="累计领用数"
          >
          </el-table-column>
          <el-table-column
            prop="stock_bad_num"
            label="累计报损数"
          >
          </el-table-column>

          <el-table-column
            prop="stock_leave_num"
            label="累计可用数"
          >
          </el-table-column>
        </el-table>
        <Pagination v-show="stockQuery.total>0" :total="stockQuery.total" :page.sync="stockQuery.page_num"
                    :limit.sync="stockQuery.page_size" @pagination="getStockList"/>
      </div>
    </div>
</template>

<script src="./_goodsStock.js" lang="js"></script>
<style src="./_goodsStock.scss" lang="scss" scoped></style>
